<template>
  {{ formatTime }}
  <div class="pay">
    <!-- 付款信息 -->
    <div class="container">
      <div class="pay-info">
        <div class="iconfont icon-queren"></div>
        <div class="orderPrompt">
          <h3>订单提交完成！请尽快完成支付</h3>
          <p>
            支付还剩 <span>{{ formatTime }}</span
            >, 超时后将取消订单
          </p>
        </div>
        <div class="amount">
          <span>应付总额：</span>
          <span class="totalPrice">¥{{ payInfo.payMoney }}</span>
        </div>
      </div>
      <!-- 付款方式 -->
      <div class="pay-content">
        <h3>选择以下付款方式</h3>
        <!-- 支付平台 -->
        <div class="payPlatform">
          <p>支付平台</p>
          <a class="elementA vx" href="javascript:;"></a>
          <a class="elementA alipay" :href="payUrl"></a>
        </div>
        <!-- 支付方式 -->
        <div class="pay-type">
          <p>支付方式</p>
          <a class="elementA" href="javascript:;">招商银行</a>
          <a class="elementA" href="javascript:;">工商银行</a>
          <a class="elementA" href="javascript:;">建设银行</a>
          <a class="elementA" href="javascript:;">农业银行</a>
          <a class="elementA" href="javascript:;">交通银行</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineOptions, ref, onMounted } from "vue";
import { getOrderDetail } from "@/apis/pay";
import { useRoute } from "vue-router";
//引入倒计时函数
import { useCountDown } from "@/composables/useCountDown";
defineOptions({
  name: "Pay",
});
const { formatTime, start } = useCountDown();
let route = useRoute();
//存储订单详情的数据
let payInfo = ref({});
onMounted(() => {
  getPayInfo();
});
//获取订单详情数据
const getPayInfo = async () => {
  let res: any = await getOrderDetail(route.query.id);
  //   console.log(res);
  payInfo.value = res.result;
  //倒计时函数调用
  start(res.result.countdown);
};
//跳转支付
//携带订单id以及回调地址跳转到支付地址(get)
//支付地址
const baseURL = "http://pcapi-xiaotuxian-front-devtest.itheima.net/";
const backURL = "http://127.0.0.1:5173/paycallback";
const redirectUrl = encodeURIComponent(backURL);
const payUrl = `${baseURL}pay/aliPay?orderId=${route.query.id}&redirect=${redirectUrl}`;
</script>

<style scoped lang="scss">
.pay-info {
  background-color: #fff;
  margin-top: 20px;
  padding: 80px 50px;
  display: flex;
  align-items: center;
  .icon-queren {
    font-size: 50px;
    color: rgb(8, 180, 25);
  }
  .orderPrompt {
    margin-left: 30px;
    p {
      color: #999;
      margin-top: 5px;
    }
  }
  .amount {
    flex: 1;
    text-align: right;
    margin-right: 100px;
    font-size: 18px;
    .totalPrice {
      color: red;
    }
    span {
      &:first-child {
        color: #999;
      }
    }
  }
}
.pay-content {
  margin-top: 30px;
  padding: 10px 0;
  background-color: #fff;
  h3 {
    height: 50px;
    line-height: 50px;
    padding-left: 20px;
    border-bottom: 1px solid #f1f1f1;
  }
  .payPlatform,
  .pay-type {
    margin: 20px;
    .elementA {
      display: inline-block;
      width: 200px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      border: 1px solid #f1f1f1;
      margin: 30px 10px;
      &.active,
      &:hover {
        border-color: $xtxColor;
      }
      &.alipay {
        background: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b6b02396368c9314528c0bbd85a2e06.png)
          no-repeat center / contain;
      }
      &.vx {
        background: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c66f98cff8649bd5ba722c2e8067c6ca.jpg)
          no-repeat center / contain;
      }
    }
  }
}
</style>
